<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册界面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/layui/layui-v2.5.6/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/login.css">

</head>
<body>
<div class="login-nav" style="width: 80%;margin: 0 auto;">
    <img src="../img/logo.png" alt="" srcset="">
</div>

<div class="layui-container" style="width: 100%;height: 500px;;margin: 0 auto;background-image: url(../img/background-login.jpg);background-size: cover;">
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="body">
                <span class="welcome">你好!请登录</span><br>
                <span class="userName">新鲜生活每一天</span>
                <img src="../img/水果.png">
                <button class="button login" onclick="dl()">登录</button>
                <button class="button register" onclick="zc()">注册</button>
                <script>
                    function dl() {
                        window.location.href="${pageContext.request.contextPath}/login";
                    }
                    function zc() {
                        window.location.href="${pageContext.request.contextPath}/register";
                    }
                </script>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="login-body">
                <div class="login bg-black" style="height: 200px;margin-top: 60px;">
                    <form class="layui-form bg-blue" action=""  method="post">
                        <h1 style="margin-left: 100px;margin-bottom: 10px;">用户注册</h1>
                        <div class="layui-form-item margin-top-10">
                            <label class="layui-form-label">用户名
                                <i class="layui-icon">&#xe66f;</i>
                            </label>
                            <div class="layui-input-inline">
                                <!-- //采用inline表示可以继续放 -->
                                <input type="text" id= "username"   name="username" required lay-verify="username" placeholder="请输入用户名" autocomplete="off" class="layui-input" lay-verType="msg">
                                <div id="userName_prompt"style="color: red"></div>
                            </div>
                            <!-- <div class="layui-form-mid layui-word-aux"></div> -->
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机 <i class="layui-icon">&#xe618;</i>  </label>
                            <div class="layui-input-inline">
                                <input type="text" id="telephone" name="telephone" onblur="checkTel()" required lay-verify="telephone" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                                <div id="telephone_prompt"style="color: red"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">请输入密码 <i class="layui-icon"> &#xe672;</i> </label>
                            <div class="layui-input-inline">
                                <input type="password" id="password" onblur="checkPassword()" name="password" required lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                                <td><div id="password_prompt"style="color: red"></div></td>
                                <div class="password_msg msg" style="display: block"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">请再次输入密码 <i class="layui-icon"> &#xe672;</i> </label>
                            <div class="layui-input-inline">
                                <input type="password" id="password2" name="password2" onblur="checkPassword2()" required lay-verify="userpassword2" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
                                <td><div id="password2_prompt"style="color: red"></div></td>
                                <div class="password_msg msg" style="display: block"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">身份类别<i class="layui-icon">&#xe770;</i></label>
                            <div class="layui-input-block">
                              <input type="radio" name="kinds" value="1" title="用户" checked>
                              <input type="radio" name="kinds" value="0" title="商家">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button id="register-btn" class="layui-btn" lay-submit lay-filter="register">注册</button>
                                <button id="reset-btn" type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="${pageContext.request.contextPath}/plugins/layui/layui-v2.5.6/layui/layui.js"></script>
<script src="${pageContext.request.contextPath}/plugins/jquery/jquery-3.4.1.js"></script>

<script>
    let username = document.querySelector("#username");
    let username_prompt = document.querySelector("#username_prompt")

    let telephone = document.querySelector("#telephone");
    let telephone_prompt = document.querySelector("#telephone_prompt");

    let password = document.querySelector("#password");
    let password_prompt = document.querySelector("#password_prompt");

    let password2 = document.querySelector("#password2");
    let password2_prompt = document.querySelector("#password2_prompt");

    let kinds = document.getElementsByName("kinds");

    $("#register-btn").click(function () {
        let username = $("#username").val();
        let password = $("#password").val();
        let telephone = $("#telephone").val();
        let password2 = $("#password2").val();

        let kinds = $("input[name='kinds']:checked").val();

        console.log("username=" + username);
        console.log("telephone=" + telephone);
        console.log("password=" + password);
        console.log("password2=" + password2);

        console.log("kinds=" + kinds);

        if (checkPassword() == true && checkPassword2() == true){
            console.log("密码和确认密码都正确")
            $.ajax({
                url:"${pageContext.request.contextPath}/view/register",
                type:"post",
                data:{
                    "username":username,
                    "telephone":telephone,
                    "password":password,
                    "kinds":kinds
                },
                dataType:"JSON",
                success:function (result) {
                    console.log("result.code"+result.code);
                    if (result.code == 0){
                        alert("注册成功!")
                        window.location.href = "${pageContext.request.contextPath}/login"
                    }else if (result.code == 1) {
                        alert("注册失败,请重新注册!")
                    }else {
                        alert("该用户名已被使用!")
                    }
                }
            })
        }
        return false;
    });

    /**
     * 注册时用户名验证
     */
    // function checkUser(){
    //     var flag = false;
    //
    //
    // };

    /**
     * 注册时手机号验证
     */
    function checkTel() {
        var flag = false;
        if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(telephone.value)){
            telephone_prompt.innerHTML = "请输入正确的手机号码";
        }else {
            telephone_prompt.innerHTML = "";
            flag = true;
        }
        return flag;
    };

    /**
     * 注册时密码验证
     */
    function checkPassword() {
        console.log("password:"+password);
        var flag = false;
        if (!/^[A-Z][a-zA-Z0-9]{5,15}$/.test(password.value)){
            password_prompt.innerHTML = "密码首字母必须大写,由数字和大小写字母组成,长度6-16位"
        }else {
            password_prompt.innerHTML = "";
            flag = true;
        }
        return flag;
    };

    /**
     * 确认密码
     */
    function checkPassword2() {
        console.log("password:"+password);
        console.log("password2:"+password2);
        var flag = false;
        if (password.value != password2.value){
            password2_prompt.innerHTML = "两次密码不一样";
        }else {
            password2_prompt.innerHTML = "";
            flag = true;
        }
        return flag;
    };

</script>

<script>
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>